<template>
	<view class="washhands-background">
		<!-- 背景层（模糊图片） -->
		<view class="background-layer"></view>

		<!-- 内容层（网格布局） -->
		<view class="handwashing-layout">
			<view class="handwashing-steps" v-for="item , index in handList" :key="item.id" @click="toggleMask(index)">
				<image :src="item.image" mode="aspectFill"></image>
				<!-- 遮罩层 -->
				<view class="hands-mask" v-if="maskStates[index]" :class="{'error-mask': item.isError}">
					<text>{{ getClickOrder(index) }}</text>
					<text v-if="item.isError" class="error-text">错误</text>
				</view>
			</view>
		</view>
		
		<!-- 错误提示 -->
		<view class="error-tip" v-if="showErrorTip">
			<text>选择了错误的洗手步骤！</text>
		</view>
		
		<!-- 完成提示 -->
		<view class="success-tip" v-if="isCompleted">
			<text>恭喜！洗手步骤完成！</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

// 洗手数据
const handList = ref([
	{ id: 1, image: 'https://i.postimg.cc/vH6cyhgS/image.png', isError: false },
	{ id: 2, image: 'https://i.postimg.cc/0yF4rY2B/image.png', isError: false },
	{ id: 3, image: 'https://i.postimg.cc/bJBgF8DF/image.png', isError: false },
	{ id: 4, image: 'https://i.postimg.cc/zfVYLDrx/image.png', isError: false },
	{ id: 5, image: 'https://i.postimg.cc/B6bbnfY3/image.png', isError: false },
	{ id: 6, image: 'https://i.postimg.cc/wjPgQRFC/image.png', isError: false },
	{ id: 7, image: 'https://i.postimg.cc/Dy9xQ2LC/image.png', isError: false },
	{ id: 8, image: 'https://i.postimg.cc/Y2b9m0KH/image.png', isError: true },
	{ id: 9, image: 'https://i.postimg.cc/8zy9R8ks/image.png', isError: true },
	{ id: 10, image: 'https://i.postimg.cc/xd1kZmSt/image.png', isError: true },
])

// 遮罩层状态管理
const maskStates = ref(handList.value.map(() => false)) // 初始所有遮罩层隐藏
const clickOrder = ref([]) // 点击顺序记录
const showErrorTip = ref(false) // 是否显示错误提示
const isCompleted = ref(false) // 是否完成所有正确步骤

// 计算正确步骤的总数
const correctStepsCount = computed(() => {
	return handList.value.filter(item => !item.isError).length;
});

// 随机排序图片
const shuffleHandList = () => {
	const shuffled = [...handList.value];
	for (let i = shuffled.length - 1; i > 0; i--) {
		const j = Math.floor(Math.random() * (i + 1));
		[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
	}
	handList.value = shuffled;
	// 重置遮罩层状态和点击顺序
	maskStates.value = handList.value.map(() => false);
	clickOrder.value = [];
	showErrorTip.value = false;
	isCompleted.value = false;
}

// 在组件挂载时随机排序
onMounted(() => {
	shuffleHandList();
});

// 切换遮罩层显示/隐藏
const toggleMask = (index) => {
	// 如果已经完成所有正确步骤，不再响应点击
	if (isCompleted.value) return;
	
	// 如果是错误步骤
	if (handList.value[index].isError) {
		// 显示错误提示
		showErrorTip.value = true;
		setTimeout(() => {
			showErrorTip.value = false;
		}, 2000);
		
		// 如果已经点击过，可以取消点击
		if (maskStates.value[index]) {
			maskStates.value[index] = false;
			// 从点击顺序中移除
			const orderIndex = clickOrder.value.indexOf(index);
			if (orderIndex !== -1) {
				clickOrder.value.splice(orderIndex, 1);
			}
		} else {
			// 首次点击错误步骤，显示错误标记
			maskStates.value[index] = true;
			clickOrder.value.push(index);
		}
		return;
	}
	
	// 只允许切换最后一个点击的元素
	if (canToggle(index)) {
		// 如果是首次点击，记录点击顺序
		if (!maskStates.value[index]) {
			clickOrder.value.push(index)
		} else {
			// 如果是取消点击，从点击顺序中移除
			clickOrder.value.pop() // 只能移除最后一个元素
		}
    
		// 切换遮罩层状态
		maskStates.value[index] = !maskStates.value[index]
		
		// 检查是否完成所有正确步骤
		checkCompletion();
	}
}

// 检查是否完成所有正确步骤
const checkCompletion = () => {
	// 计算已选择的正确步骤数量
	const selectedCorrectSteps = handList.value.filter((item, index) => 
		!item.isError && maskStates.value[index]
	).length;
	
	// 如果已选择的正确步骤数量等于总正确步骤数量
	if (selectedCorrectSteps === correctStepsCount.value) {
		isCompleted.value = true;
		// 显示完成提示
		setTimeout(() => {
			uni.showToast({
				title: '恭喜！洗手步骤完成！',
				icon: 'success',
				duration: 2000
			});
		}, 300);
	} else {
		isCompleted.value = false;
	}
}

// 计算点击顺序
const getClickOrder = (index) => {
	const orderIndex = clickOrder.value.indexOf(index)
	return orderIndex !== -1 ? orderIndex + 1 : ''
}

// 判断是否可以切换遮罩层
const canToggle = (index) => {
	// 如果遮罩层未显示，且没有其他未显示的遮罩层，可以显示
	if (!maskStates.value[index]) {
		return true
	}
  
	// 如果遮罩层已显示，且是最后一个点击的，可以隐藏
	return clickOrder.value.length > 0 && 
		clickOrder.value[clickOrder.value.length - 1] === index
}
</script>

<style lang="scss" scoped>
.washhands-background {
	position: relative; /* 为子元素提供定位参考 */
	width: 100%;
	height: 305rpx;
	.background-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('https://i.postimg.cc/cJtr1RQZ/image-png-1.png');
		background-position: center;
		background-size: cover;
		filter: blur(16px); /* 模糊效果仅作用于背景 */
		z-index: -1; /* 置于底层 */
	}
	/* 内容层：网格布局 */
	.handwashing-layout {
		box-sizing: border-box;
		position: relative; /* 确保层级在背景之上 */
		padding: 40rpx; /* 可选：添加内边距调整布局 */
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		// grid-template-rows: repeat(2, 1fr);
		gap: 30rpx;
		
		.handwashing-steps {
			position: relative;
			border: #2A82E4 solid 1rpx;
			border-radius: 20rpx;
			width: 100rpx;
			height: 80rpx;
			
			.hands-mask{
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 0.5);
				backdrop-filter: blur(10px);
				flex-direction: column;
				
				&.error-mask {
					background-color: rgba(255, 0, 0, 0.3);
				}
				
				text{
					font-size: 35rpx;
					color: #2A82E4;
				}
				
				.error-text {
					font-size: 20rpx;
					color: #FF0000;
					margin-top: 5rpx;
				}
			}
			image{
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
	
	.error-tip {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(255, 0, 0, 0.7);
		color: white;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		z-index: 100;
		animation: fadeIn 0.3s ease;
	}
	
	.success-tip {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 128, 0, 0.7);
		color: white;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		z-index: 100;
		animation: fadeIn 0.3s ease;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
}
</style>